<template>
  <div class="home-view">
    <el-container>
      <!--      很重要-->
      <!--      <el-menu :default-openeds="['1']" unique-opened router>-->
      <!--      </el-menu>-->
      <el-header class="main-header">
        <div class="logo-container" @click="goHome">
          <img src="../assets/logo/logo.png" alt="Logo">
          <span class="logo-title">世界之窗</span>
        </div>
        <el-menu :default-openeds="['1']" unique-opened router class="navbar" :default-active="activeIndex"
          style="border: none;" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" background-color="#333">
          <el-menu-item index="1"><el-link type="info" @click="goToTag('投资')">投资</el-link></el-menu-item>
          <el-menu-item index="2"><el-link type="info" @click="goToTag('学习')">学习</el-link></el-menu-item>
          <el-menu-item index="3"><el-link type="info" @click="goToTag('工作')">工作</el-link></el-menu-item>
          <el-menu-item index="4"><el-link type="info" @click="goToTag('消费')">消费</el-link></el-menu-item>
          <el-menu-item index="6"><el-link type="primary" @click="goToTagDetail">更多>></el-link></el-menu-item>

          <!-- 搜索框 -->
          <!-- <el-input
              placeholder="搜索"
              v-model="searchQuery"
              @clear="clearSearch"
              class="search-input custom-width"
          ></el-input>
          <i class="  el-icon-search search-icon" @click="searchBooks"
             style="background-color: #f5f5f5; padding: 5px;"></i> -->

          <div>
            <el-input placeholder="请输入内容" class="input-with-select">
              <el-select slot="prepend" placeholder="请选择">
                <el-option label="餐厅名"></el-option>
                <el-option label="订单号"></el-option>
                <el-option label="用户电话"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>或
          <div>
            <el-button type="primary">发布</el-button>
            <!-- <pubulish-module></pubulish-module> -->
          </div>
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            首页
          </el-menu-item>


          <el-menu-item index="/allbooklist">
            <i class=" el-icon-collection"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
        </el-menu>
      </el-header>
    </el-container>


    <div class="container">
      <el-container>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </div>


    <el-footer>
      <p @click="goAbout">&copy; 2024 WEB实训</p>
    </el-footer>

  </div>
</template>

<script>
import { Menu, MenuItem } from 'element-ui';
import { books } from "@/assets/data/booksData";
import '@/assets/css/frame.css'

export default {
  name: 'Manager',
  components: {
    'el-menu': Menu,
    'el-menu-item': MenuItem
  },

  data() {
    return {
      searchQuery: '', // 用户输入的搜索词
      books: books,// 直接使用导入的数据
    };
  },
  created() {
    // this.loadMessages(); // 组件创建时加载留言
  },
  methods: {
    goToTag(tag) {
      this.$router.push({ path: `/tag/${tag}` });
    },
    goToTagDetail() {
      this.$router.push({ path: `/tag` });
    },
    searchBooks() {
      const searchQuery = this.searchQuery.trim();
      if (searchQuery) {
        this.$router.push({
          name: 'SearchResults',
          params: { query: this.searchQuery }
        });
      } else {
        // 处理空搜索词的逻辑
        this.$notify.warning({
          title: '搜索提示',
          message: '搜索内容不能为空',
        });
      }
    },
    goHome() {
      this.$router.push({ name: 'Home' });
    },
    goAbout() {
      this.$router.push({ name: 'About' });
    },
    clearSearch() {
      this.searchQuery = ''; // 清空搜索框
      this.$router.push({ name: 'home' });
    },
  },
  computed: {
    // 计算属性，根据当前路由路径设置激活的菜单项索引
    activeIndex() {
      return this.$route.path;
    },
    filteredBooks() {
      return this.hasSearchQuery
        ? this.books.filter(book =>
          book.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
          book.author.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
        : []; // 当搜索框为空时，返回一个空数组
    },
    hasSearchQuery() {
      return this.searchQuery.trim() !== '';
    },
  },
};
</script>
